<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>content | VitePress</title>
    <meta name="description" content="A VitePress site">
    <link rel="preload stylesheet" href="/assets/style.1fe3aef4.css" as="style">
    
    <script type="module" src="/assets/app.050c7e60.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.52b122f8.js">
    <link rel="modulepreload" href="/assets/chunks/theme.f97d03d7.js">
    <link rel="modulepreload" href="/assets/chunks/index.29ce75ac.js">
    <link rel="modulepreload" href="/assets/chunks/index.6bc94b44.js">
    <link rel="modulepreload" href="/assets/chunks/commonjsHelpers.725317a4.js">
    <link rel="modulepreload" href="/assets/chunks/el-form-renderer.d17e9645.js">
    <link rel="modulepreload" href="/assets/assembly_form_content.md.7e49928d.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-80f406db><!--[--><!--]--><!--[--><span tabindex="-1" data-v-7385a610></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-7385a610> Skip to content </a><!--]--><!----><header class="VPNav" data-v-80f406db data-v-5953b7f9><div class="VPNavBar has-sidebar" data-v-5953b7f9 data-v-26086e15><div class="container" data-v-26086e15><div class="title" data-v-26086e15><div class="VPNavBarTitle has-sidebar" data-v-26086e15 data-v-561c825c><a class="title" href="/" data-v-561c825c><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-a853fe5c><!--]--><!----><!--[--><!--]--></a></div></div><div class="content" data-v-26086e15><div class="curtain" data-v-26086e15></div><div class="content-body" data-v-26086e15><!--[--><!--]--><div class="VPNavBarSearch search" data-v-26086e15><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-26086e15 data-v-81c94828><span id="main-nav-aria-label" class="visually-hidden" data-v-81c94828>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide/form.html" tabindex="0" data-v-81c94828 data-v-391de4ef><!--[--><span data-v-391de4ef>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/assembly/form/basic.html" tabindex="0" data-v-81c94828 data-v-391de4ef><!--[--><span data-v-391de4ef>组件</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-26086e15 data-v-30046737><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-30046737 data-v-39d37fec data-v-94d9d5ee><span class="check" data-v-94d9d5ee><span class="icon" data-v-94d9d5ee><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-39d37fec><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-39d37fec><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-26086e15 data-v-6dcf6834 data-v-19d2c3a0><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/childe-jia" aria-label="github" target="_blank" rel="noopener" data-v-19d2c3a0 data-v-98b97b21><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-26086e15 data-v-12a305f3 data-v-c42375a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-c42375a2><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-c42375a2><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-c42375a2><div class="VPMenu" data-v-c42375a2 data-v-b198516b><!----><!--[--><!--[--><!----><div class="group" data-v-12a305f3><div class="item appearance" data-v-12a305f3><p class="label" data-v-12a305f3>Appearance</p><div class="appearance-action" data-v-12a305f3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-12a305f3 data-v-39d37fec data-v-94d9d5ee><span class="check" data-v-94d9d5ee><span class="icon" data-v-94d9d5ee><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-39d37fec><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-39d37fec><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-12a305f3><div class="item social-links" data-v-12a305f3><div class="VPSocialLinks social-links-list" data-v-12a305f3 data-v-19d2c3a0><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/childe-jia" aria-label="github" target="_blank" rel="noopener" data-v-19d2c3a0 data-v-98b97b21><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-26086e15 data-v-e6abcc4f><span class="container" data-v-e6abcc4f><span class="top" data-v-e6abcc4f></span><span class="middle" data-v-e6abcc4f></span><span class="bottom" data-v-e6abcc4f></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-80f406db data-v-e0dceac6><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-e0dceac6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-e0dceac6><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-e0dceac6>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-e0dceac6 data-v-44f34666><button data-v-44f34666>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-80f406db data-v-896a7e03><div class="curtain" data-v-896a7e03></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-896a7e03><span class="visually-hidden" id="sidebar-aria-label" data-v-896a7e03> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-896a7e03><section class="VPSidebarItem level-0 has-active" data-v-896a7e03 data-v-6f847c00><div class="item" role="button" tabindex="0" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><h2 class="text" data-v-6f847c00>表单Form</h2><!----></div><div class="items" data-v-6f847c00><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/basic.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>base</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/checkbox-group.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>checkbox-group</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/content.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>content</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/date-picker.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>date-picker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/deprecated.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>deprecated</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/disabled.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>disabled</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/el.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>el</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/get-component-by-id.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>get-component-by-id</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/get-form-value.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>get-form-value</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/hidden.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>hidden</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/next-tick.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>next-tick</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/on.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>on</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/radio-group.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>radio-group</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/readonly.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>readonly</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/remote.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>remote</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/rules-plus.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>rules-plus</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/rules.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>rules</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/set-options.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>set-options</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/slot-label.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>slot-label</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/slot.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>slot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/update-form.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>update-form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/v-model.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>v-model</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/form/value-format.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>value-format</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-896a7e03><section class="VPSidebarItem level-0" data-v-896a7e03 data-v-6f847c00><div class="item" role="button" tabindex="0" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><h2 class="text" data-v-6f847c00>表格table</h2><!----></div><div class="items" data-v-6f847c00><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/table/table.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>表格</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-896a7e03><section class="VPSidebarItem level-0" data-v-896a7e03 data-v-6f847c00><div class="item" role="button" tabindex="0" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><h2 class="text" data-v-6f847c00>进阶</h2><!----></div><div class="items" data-v-6f847c00><!--[--><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/advanced/customForm.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>form自定义组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/advanced/customFormRoules.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>form自定义组件设置自定义校验规则</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/advanced/upload.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>form自定义组件--图片上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-6f847c00 data-v-6f847c00><div class="item" data-v-6f847c00><div class="indicator" data-v-6f847c00></div><a class="VPLink link link" href="/assembly/advanced/uploadFile.html" data-v-6f847c00><!--[--><p class="text" data-v-6f847c00>form自定义组件--文件上传</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-80f406db data-v-0c7fe881><div class="VPDoc has-sidebar has-aside" data-v-0c7fe881 data-v-1a937d4e><!--[--><!--]--><div class="container" data-v-1a937d4e><div class="aside" data-v-1a937d4e><div class="aside-curtain" data-v-1a937d4e></div><div class="aside-container" data-v-1a937d4e><div class="aside-content" data-v-1a937d4e><div class="VPDocAside" data-v-1a937d4e data-v-cf7716b2><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-cf7716b2 data-v-88ca8947><div class="content" data-v-88ca8947><div class="outline-marker" data-v-88ca8947></div><div class="outline-title" role="heading" aria-level="2" data-v-88ca8947>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-88ca8947><span class="visually-hidden" id="doc-outline-aria-label" data-v-88ca8947> Table of Contents for current page </span><ul class="root" data-v-88ca8947 data-v-59923752><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-cf7716b2></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-1a937d4e><div class="content-container" data-v-1a937d4e><!--[--><!--]--><!----><main class="main" data-v-1a937d4e><div style="position:relative;" class="vp-doc _assembly_form_content" data-v-1a937d4e><div><h1 id="content" tabindex="-1">content <a class="header-anchor" href="#content" aria-label="Permalink to &quot;content&quot;">​</a></h1><p>现在 content 是响应式的。这意味着: 1. disabled、options 和其他任何属性都可以直接在 content 上修改 2. 可以直接修改 content 来新增删除表单项</p><br><form class="el-form el-form--default el-form--label-right el-form-renderer"><!--[--><!--[--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item is-required asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-6" data-name="form1"><!--[--><!--[--><div id="el-id-8139-6" class="el-form-item__label" style="width:100px;"><!--[-->name<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-input el-input--default" style=""><!-- input --><!--[--><!-- prepend slot --><!--v-if--><div class="el-input__wrapper"><!-- prefix slot --><!--v-if--><input class="el-input__inner" loading="false" type="text" autocomplete="off" tabindex="0" placeholder="test placeholder" style=""><!-- suffix slot --><!--v-if--></div><!-- append slot --><!--v-if--><!--]--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><div>requestRemoteCount: 0</div><!--]--><!--[--><!--]--><div class="el-form-item is-required asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-7"><!--[--><!--[--><div id="el-id-8139-7" class="el-form-item__label" style="width:100px;"><!--[-->region<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-select"><!--[--><div class="select-trigger el-tooltip__trigger el-tooltip__trigger"><div tabindex="-1" class="el-select__tags" style="max-width:-32px;width:100%;"><!--v-if--><span class="el-select-tags-wrapper" style=""><!--[--><!--]--></span><input type="text" class="el-select__input" autocomplete="off" style="margin-left:11px;flex-grow:1;width:-0.625%;max-width:-42px;" role="combobox" aria-activedescendant aria-controls="el-id-8139-9" aria-expanded="false" aria-autocomplete="none" aria-haspopup="listbox" value></div><!--v-if--><div class="el-input el-input--suffix" style=""><!-- input --><!--[--><!-- prepend slot --><!--v-if--><div class="el-input__wrapper"><!-- prefix slot --><!--v-if--><input class="el-input__inner" role="combobox" aria-activedescendant aria-controls="el-id-8139-9" aria-expanded="false" aria-autocomplete="none" aria-haspopup="listbox" type="text" readonly autocomplete="off" tabindex="-1" placeholder="Select" style=""><!-- suffix slot --><span class="el-input__suffix"><span class="el-input__suffix-inner"><!--[--><!--[--><i class="el-icon el-select__caret el-select__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path></svg><!--]--></i><!--v-if--><!--]--><!--v-if--><!--]--><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span></span></div><!-- append slot --><!--v-if--><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item is-required asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-10"><!--[--><!--[--><div id="el-id-8139-10" class="el-form-item__label" style="width:100px;"><!--[-->date<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><!--[--><div class="el-date-editor el-date-editor--daterange el-input__wrapper el-range-editor el-tooltip__trigger el-tooltip__trigger" style="" aria-controls="el-id-8139-11" aria-expanded="false" aria-haspopup="dialog"><i class="el-icon el-input__icon el-range__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M128 384v512h768V192H768v32a32 32 0 1 1-64 0v-32H320v32a32 32 0 0 1-64 0v-32H128v128h768v64zm192-256h384V96a32 32 0 1 1 64 0v32h160a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h160V96a32 32 0 0 1 64 0zm-32 384h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m192-192h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m192-192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64"></path></svg><!--]--></i><input autocomplete="off" name value class="el-range-input"><!--[--><span class="el-range-separator">-</span><!--]--><input autocomplete="off" name value class="el-range-input"><i class="el-icon el-input__icon el-range__close-icon el-range__close-icon--hidden" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z"></path><path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path></svg><!--]--></i></div><!--teleport start--><!--teleport end--><!--]--><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-12"><!--[--><!--[--><div id="el-id-8139-12" class="el-form-item__label" style="width:100px;"><!--[-->delivery<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-switch" style=""><input class="el-switch__input" type="checkbox" role="switch" aria-checked="false" aria-disabled="false" name true-value="true" false-value="false"><!--v-if--><span class="el-switch__core" style="width:;"><!--v-if--><div class="el-switch__action"><!--[--><!--v-if--><!--]--></div></span><!--v-if--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item is-required asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-13"><!--[--><!--[--><div id="el-id-8139-13" class="el-form-item__label" style="width:100px;"><!--[-->type<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-checkbox-group" role="group" aria-labelledby="el-id-8139-13" loading="false"><!--[--><!--[--><!--[--><!----><label class="el-checkbox"><span class="el-checkbox__input"><input class="el-checkbox__original" type="checkbox" indeterminate="false" value="typeA"><span class="el-checkbox__inner"></span></span><span class="el-checkbox__label"><!--[-->typeA<!--]--><!--v-if--></span></label><!--]--><!--[--><!----><label class="el-checkbox"><span class="el-checkbox__input"><input class="el-checkbox__original" type="checkbox" indeterminate="false" value="typeB"><span class="el-checkbox__inner"></span></span><span class="el-checkbox__label"><!--[-->typeB<!--]--><!--v-if--></span></label><!--]--><!--[--><!----><label class="el-checkbox"><span class="el-checkbox__input"><input class="el-checkbox__original" type="checkbox" indeterminate="false" value="typeC"><span class="el-checkbox__inner"></span></span><span class="el-checkbox__label"><!--[-->typeC<!--]--><!--v-if--></span></label><!--]--><!--]--><!--]--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item is-required asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-14"><!--[--><!--[--><div id="el-id-8139-14" class="el-form-item__label" style="width:100px;"><!--[-->resource<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-radio-group" role="radiogroup" aria-labelledby="el-id-8139-14" loading="false"><!--[--><!--[--><!--[--><!----><label class="el-radio"><span class="el-radio__input"><input class="el-radio__original" value="resourceA" name="el-id-8139-15" type="radio"><span class="el-radio__inner"></span></span><span class="el-radio__label"><!--[-->resourceA<!--]--></span></label><!--]--><!--[--><!----><label class="el-radio"><span class="el-radio__input"><input class="el-radio__original" value="resourceB" name="el-id-8139-15" type="radio"><span class="el-radio__inner"></span></span><span class="el-radio__label"><!--[-->resourceB<!--]--></span></label><!--]--><!--]--><!--]--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--[--><!--[--><!--]--><!--[--><!--]--><div class="el-form-item is-required asterisk-left render-form-item" role="group" aria-labelledby="el-id-8139-16"><!--[--><!--[--><div id="el-id-8139-16" class="el-form-item__label" style="width:100px;"><!--[-->desc<!--]--></div><!--]--><!--]--><div class="el-form-item__content" style=""><!--[--><div class="el-textarea" style=""><!-- input --><!--[--><!-- textarea --><textarea class="el-textarea__inner" loading="false" tabindex="0" autocomplete="off" style=""></textarea><!--v-if--><!--]--></div><!--]--><!--[--><!--]--></div></div><!--]--><!--]--><!--[--><div class="el-form-item asterisk-left"><!--[--><!--[--><!--v-if--><!--]--><!--]--><div class="el-form-item__content" style="margin-left:100px;"><!--[--><button ariadisabled="false" type="button" class="el-button" style=""><!--v-if--><span class=""><!--[-->resetForm<!--]--></span></button><button ariadisabled="false" type="button" class="el-button" style=""><!--v-if--><span class=""><!--[-->禁用第一项<!--]--></span></button><button ariadisabled="false" type="button" class="el-button" style=""><!--v-if--><span class=""><!--[-->更新 region 的 options<!--]--></span></button><button ariadisabled="false" type="button" class="el-button" style=""><!--v-if--><span class=""><!--[-->随机插入表单项<!--]--></span></button><button ariadisabled="false" type="button" class="el-button" style=""><!--v-if--><span class=""><!--[-->随机移除表单项<!--]--></span></button><!--]--><!--[--><!--]--></div></div><pre>{
  &quot;name&quot;: &quot;1111&quot;,
  &quot;region&quot;: [],
  &quot;type&quot;: [],
  &quot;startDate&quot;: &quot;2019-01-01&quot;,
  &quot;endDate&quot;: &quot;2019-01-02&quot;
}</pre><!--]--><!--]--></form><details class="details custom-block"><summary>查看源代码</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">el-form-renderer</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">label-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100px&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">:content</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;content&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">v-model:FormData</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;FormData&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;form&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">id</span><span style="color:#E1E4E8;">:</span><span style="color:#B392F0;">region</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;requestRemoteCount: {{ requestRemoteCount }}&lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#85E89D;">el-form-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;resetForm&quot;</span><span style="color:#E1E4E8;">&gt;resetForm&lt;/</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;disableName&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &gt;{{ content[0].disabled ? &quot;启&quot; : &quot;禁&quot; }}用第一项&lt;/</span><span style="color:#85E89D;">el-button</span></span>
<span class="line"><span style="color:#E1E4E8;">      &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;setOptions&quot;</span><span style="color:#E1E4E8;">&gt;更新 region 的 options&lt;/</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;addFormItem&quot;</span><span style="color:#E1E4E8;">&gt;随机插入表单项&lt;/</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;removeFormItem&quot;</span><span style="color:#E1E4E8;">&gt;随机移除表单项&lt;/</span><span style="color:#85E89D;">el-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#85E89D;">el-form-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">&gt;{{ FormData }}&lt;/</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;/</span><span style="color:#85E89D;">el-form-renderer</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { reactive, ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&quot;vue&quot;</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> elFormRenderer </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&quot;../components/femessage/el-form-renderer.vue&quot;</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> requestRemoteCount </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">form</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">();</span></span>
<span class="line"><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> id </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#F97583;">let</span><span style="color:#E1E4E8;"> FormData </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">reactive</span><span style="color:#E1E4E8;">({</span></span>
<span class="line"><span style="color:#E1E4E8;">  name: </span><span style="color:#9ECBFF;">&quot;1111&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">  region: [],</span></span>
<span class="line"><span style="color:#E1E4E8;">  type: [],</span></span>
<span class="line"><span style="color:#E1E4E8;">  startDate: </span><span style="color:#9ECBFF;">&quot;2019-01-01&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">  endDate: </span><span style="color:#9ECBFF;">&quot;2019-01-02&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">});</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">content</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">reactive</span><span style="color:#E1E4E8;">([</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    type: </span><span style="color:#9ECBFF;">&quot;input&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    id: </span><span style="color:#9ECBFF;">&quot;name&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    label: </span><span style="color:#9ECBFF;">&quot;name&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    attrs: { </span><span style="color:#9ECBFF;">&quot;data-name&quot;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&quot;form1&quot;</span><span style="color:#E1E4E8;"> },</span></span>
<span class="line"><span style="color:#E1E4E8;">    el: {</span></span>
<span class="line"><span style="color:#E1E4E8;">      size: </span><span style="color:#9ECBFF;">&quot;default&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">      placeholder: </span><span style="color:#9ECBFF;">&quot;test placeholder&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    },</span></span>
<span class="line"><span style="color:#E1E4E8;">    rules: [</span></span>
<span class="line"><span style="color:#E1E4E8;">      { required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&quot;miss name&quot;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&quot;blur&quot;</span><span style="color:#E1E4E8;"> },</span></span>
<span class="line"><span style="color:#E1E4E8;">      { min: </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, max: </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&quot;length between 3 to 5&quot;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&quot;blur&quot;</span><span style="color:#E1E4E8;"> },</span></span>
<span class="line"><span style="color:#E1E4E8;">    ],</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    type: </span><span style="color:#9ECBFF;">&quot;select&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    id: </span><span style="color:#9ECBFF;">&quot;region&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    label: </span><span style="color:#9ECBFF;">&quot;region&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    remote: {</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#6A737D;">// url: &#39;https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/el-form-renderer?q=remote&#39;,</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">request</span><span style="color:#E1E4E8;">: () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">data</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span></span>
<span class="line"><span style="color:#E1E4E8;">          {</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&quot;shanghai&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            value: </span><span style="color:#9ECBFF;">&quot;shanghai&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">          },</span></span>
<span class="line"><span style="color:#E1E4E8;">          {</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&quot;beijing&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            value: </span><span style="color:#9ECBFF;">&quot;beijing&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">          },</span></span>
<span class="line"><span style="color:#E1E4E8;">          {</span></span>
<span class="line"><span style="color:#E1E4E8;">            label: </span><span style="color:#9ECBFF;">&quot;guangzhou&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">            value: </span><span style="color:#9ECBFF;">&quot;guangzhou&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">          },</span></span>
<span class="line"><span style="color:#E1E4E8;">        ];</span></span>
<span class="line"><span style="color:#E1E4E8;">        requestRemoteCount.value</span><span style="color:#F97583;">++</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Promise</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">r</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setTimeout</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">r</span><span style="color:#E1E4E8;">(data), </span><span style="color:#79B8FF;">2000</span><span style="color:#E1E4E8;">));</span></span>
<span class="line"><span style="color:#E1E4E8;">      },</span></span>
<span class="line"><span style="color:#E1E4E8;">    },</span></span>
<span class="line"><span style="color:#E1E4E8;">    el: { filterable: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, multiple: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, multipleLimit: </span><span style="color:#79B8FF;">2</span><span style="color:#E1E4E8;"> },</span></span>
<span class="line"><span style="color:#E1E4E8;">    rules: [{ required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&quot;miss area&quot;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&quot;change&quot;</span><span style="color:#E1E4E8;"> }],</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    type: </span><span style="color:#9ECBFF;">&quot;date-picker&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    id: </span><span style="color:#9ECBFF;">&quot;date&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    label: </span><span style="color:#9ECBFF;">&quot;date&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    el: {</span></span>
<span class="line"><span style="color:#E1E4E8;">      type: </span><span style="color:#9ECBFF;">&quot;daterange&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">      valueFormat: </span><span style="color:#9ECBFF;">&quot;yyyy-MM-dd&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    },</span></span>
<span class="line"><span style="color:#E1E4E8;">    rules: [{ required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&quot;miss date&quot;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&quot;change&quot;</span><span style="color:#E1E4E8;"> }],</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">inputFormat</span><span style="color:#E1E4E8;">: (</span><span style="color:#FFAB70;">row</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (row.startDate </span><span style="color:#F97583;">&amp;&amp;</span><span style="color:#E1E4E8;"> row.endDate) {</span></span>
<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> [row.startDate, row.endDate];</span></span>
<span class="line"><span style="color:#E1E4E8;">      }</span></span>
<span class="line"><span style="color:#E1E4E8;">    },</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">outputFormat</span><span style="color:#E1E4E8;">: (</span><span style="color:#FFAB70;">val</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">!</span><span style="color:#E1E4E8;">val) {</span></span>
<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> { startDate: </span><span style="color:#9ECBFF;">&quot;&quot;</span><span style="color:#E1E4E8;">, endDate: </span><span style="color:#9ECBFF;">&quot;&quot;</span><span style="color:#E1E4E8;"> };</span></span>
<span class="line"><span style="color:#E1E4E8;">      }</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">        startDate: val[</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">],</span></span>
<span class="line"><span style="color:#E1E4E8;">        endDate: val[</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">],</span></span>
<span class="line"><span style="color:#E1E4E8;">      };</span></span>
<span class="line"><span style="color:#E1E4E8;">    },</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    type: </span><span style="color:#9ECBFF;">&quot;switch&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    id: </span><span style="color:#9ECBFF;">&quot;delivery&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    label: </span><span style="color:#9ECBFF;">&quot;delivery&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    type: </span><span style="color:#9ECBFF;">&quot;checkbox-group&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    id: </span><span style="color:#9ECBFF;">&quot;type&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    label: </span><span style="color:#9ECBFF;">&quot;type&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    default: [],</span></span>
<span class="line"><span style="color:#E1E4E8;">    options: [</span></span>
<span class="line"><span style="color:#E1E4E8;">      {</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&quot;typeA&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">      },</span></span>
<span class="line"><span style="color:#E1E4E8;">      {</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&quot;typeB&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">      },</span></span>
<span class="line"><span style="color:#E1E4E8;">      {</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&quot;typeC&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">      },</span></span>
<span class="line"><span style="color:#E1E4E8;">    ],</span></span>
<span class="line"><span style="color:#E1E4E8;">    rules: [{ type: </span><span style="color:#9ECBFF;">&quot;array&quot;</span><span style="color:#E1E4E8;">, required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&quot;miss type&quot;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&quot;change&quot;</span><span style="color:#E1E4E8;"> }],</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    type: </span><span style="color:#9ECBFF;">&quot;radio-group&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    id: </span><span style="color:#9ECBFF;">&quot;resource&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    label: </span><span style="color:#9ECBFF;">&quot;resource&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    options: [</span></span>
<span class="line"><span style="color:#E1E4E8;">      {</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&quot;resourceA&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">      },</span></span>
<span class="line"><span style="color:#E1E4E8;">      {</span></span>
<span class="line"><span style="color:#E1E4E8;">        label: </span><span style="color:#9ECBFF;">&quot;resourceB&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">      },</span></span>
<span class="line"><span style="color:#E1E4E8;">    ],</span></span>
<span class="line"><span style="color:#E1E4E8;">    rules: [{ required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&quot;miss resource&quot;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&quot;change&quot;</span><span style="color:#E1E4E8;"> }],</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">  {</span></span>
<span class="line"><span style="color:#E1E4E8;">    type: </span><span style="color:#9ECBFF;">&quot;input&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    id: </span><span style="color:#9ECBFF;">&quot;desc&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    label: </span><span style="color:#9ECBFF;">&quot;desc&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    el: {</span></span>
<span class="line"><span style="color:#E1E4E8;">      type: </span><span style="color:#9ECBFF;">&quot;textarea&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    },</span></span>
<span class="line"><span style="color:#E1E4E8;">    rules: [{ required: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">, message: </span><span style="color:#9ECBFF;">&quot;miss desc&quot;</span><span style="color:#E1E4E8;">, trigger: </span><span style="color:#9ECBFF;">&quot;blur&quot;</span><span style="color:#E1E4E8;"> }],</span></span>
<span class="line"><span style="color:#E1E4E8;">  },</span></span>
<span class="line"><span style="color:#E1E4E8;">]);</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">resetForm</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  form.value.methods.</span><span style="color:#B392F0;">resetFields</span><span style="color:#E1E4E8;">();</span></span>
<span class="line"><span style="color:#E1E4E8;">};</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disableName</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  content[</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">].disabled </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">!</span><span style="color:#E1E4E8;">content[</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">].disabled;</span></span>
<span class="line"><span style="color:#E1E4E8;">};</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setOptions</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">region</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> content.</span><span style="color:#B392F0;">find</span><span style="color:#E1E4E8;">((</span><span style="color:#FFAB70;">item</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> item.id </span><span style="color:#F97583;">===</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&quot;region&quot;</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (</span><span style="color:#F97583;">!</span><span style="color:#E1E4E8;">region) </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  region.options </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [{ label: </span><span style="color:#9ECBFF;">&quot;广州&quot;</span><span style="color:#E1E4E8;">, value: </span><span style="color:#9ECBFF;">&quot;广州&quot;</span><span style="color:#E1E4E8;"> }];</span></span>
<span class="line"><span style="color:#E1E4E8;">};</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">addFormItem</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">i</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> Math.</span><span style="color:#B392F0;">floor</span><span style="color:#E1E4E8;">(Math.</span><span style="color:#B392F0;">random</span><span style="color:#E1E4E8;">() </span><span style="color:#F97583;">*</span><span style="color:#E1E4E8;"> (content.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">+</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">));</span></span>
<span class="line"><span style="color:#E1E4E8;">  id.value</span><span style="color:#F97583;">++</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  content.</span><span style="color:#B392F0;">splice</span><span style="color:#E1E4E8;">(i, </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">, {</span></span>
<span class="line"><span style="color:#E1E4E8;">    id: </span><span style="color:#9ECBFF;">`name${</span><span style="color:#E1E4E8;">id</span><span style="color:#9ECBFF;">.</span><span style="color:#E1E4E8;">value</span><span style="color:#9ECBFF;">}`</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    label: </span><span style="color:#9ECBFF;">`表单项${</span><span style="color:#E1E4E8;">id</span><span style="color:#9ECBFF;">.</span><span style="color:#E1E4E8;">value</span><span style="color:#9ECBFF;">}`</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">    type: </span><span style="color:#9ECBFF;">&quot;input&quot;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">  });</span></span>
<span class="line"><span style="color:#E1E4E8;">};</span></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">removeFormItem</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">if</span><span style="color:#E1E4E8;"> (content.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">&lt;=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">i</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> Math.</span><span style="color:#B392F0;">floor</span><span style="color:#E1E4E8;">(Math.</span><span style="color:#B392F0;">random</span><span style="color:#E1E4E8;">() </span><span style="color:#F97583;">*</span><span style="color:#E1E4E8;"> content.</span><span style="color:#79B8FF;">length</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;">  content.</span><span style="color:#B392F0;">splice</span><span style="color:#E1E4E8;">(i, </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;">};</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">el-form-renderer</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">label-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100px&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">:content</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;content&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">v-model:FormData</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;FormData&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;form&quot;</span></span>
<span class="line"><span style="color:#24292E;">  &gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">id</span><span style="color:#24292E;">:</span><span style="color:#6F42C1;">region</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;requestRemoteCount: {{ requestRemoteCount }}&lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#22863A;">el-form-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;resetForm&quot;</span><span style="color:#24292E;">&gt;resetForm&lt;/</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;disableName&quot;</span></span>
<span class="line"><span style="color:#24292E;">        &gt;{{ content[0].disabled ? &quot;启&quot; : &quot;禁&quot; }}用第一项&lt;/</span><span style="color:#22863A;">el-button</span></span>
<span class="line"><span style="color:#24292E;">      &gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;setOptions&quot;</span><span style="color:#24292E;">&gt;更新 region 的 options&lt;/</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;addFormItem&quot;</span><span style="color:#24292E;">&gt;随机插入表单项&lt;/</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;removeFormItem&quot;</span><span style="color:#24292E;">&gt;随机移除表单项&lt;/</span><span style="color:#22863A;">el-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#22863A;">el-form-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#22863A;">pre</span><span style="color:#24292E;">&gt;{{ FormData }}&lt;/</span><span style="color:#22863A;">pre</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;/</span><span style="color:#22863A;">el-form-renderer</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { reactive, ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&quot;vue&quot;</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> elFormRenderer </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&quot;../components/femessage/el-form-renderer.vue&quot;</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#D73A49;">let</span><span style="color:#24292E;"> requestRemoteCount </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">form</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">();</span></span>
<span class="line"><span style="color:#D73A49;">let</span><span style="color:#24292E;"> id </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#D73A49;">let</span><span style="color:#24292E;"> FormData </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">reactive</span><span style="color:#24292E;">({</span></span>
<span class="line"><span style="color:#24292E;">  name: </span><span style="color:#032F62;">&quot;1111&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">  region: [],</span></span>
<span class="line"><span style="color:#24292E;">  type: [],</span></span>
<span class="line"><span style="color:#24292E;">  startDate: </span><span style="color:#032F62;">&quot;2019-01-01&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">  endDate: </span><span style="color:#032F62;">&quot;2019-01-02&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">});</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">content</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">reactive</span><span style="color:#24292E;">([</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    type: </span><span style="color:#032F62;">&quot;input&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    id: </span><span style="color:#032F62;">&quot;name&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    label: </span><span style="color:#032F62;">&quot;name&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    attrs: { </span><span style="color:#032F62;">&quot;data-name&quot;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">&quot;form1&quot;</span><span style="color:#24292E;"> },</span></span>
<span class="line"><span style="color:#24292E;">    el: {</span></span>
<span class="line"><span style="color:#24292E;">      size: </span><span style="color:#032F62;">&quot;default&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">      placeholder: </span><span style="color:#032F62;">&quot;test placeholder&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    },</span></span>
<span class="line"><span style="color:#24292E;">    rules: [</span></span>
<span class="line"><span style="color:#24292E;">      { required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&quot;miss name&quot;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&quot;blur&quot;</span><span style="color:#24292E;"> },</span></span>
<span class="line"><span style="color:#24292E;">      { min: </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, max: </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&quot;length between 3 to 5&quot;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&quot;blur&quot;</span><span style="color:#24292E;"> },</span></span>
<span class="line"><span style="color:#24292E;">    ],</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    type: </span><span style="color:#032F62;">&quot;select&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    id: </span><span style="color:#032F62;">&quot;region&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    label: </span><span style="color:#032F62;">&quot;region&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    remote: {</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6A737D;">// url: &#39;https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/el-form-renderer?q=remote&#39;,</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">request</span><span style="color:#24292E;">: () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">        </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">data</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span></span>
<span class="line"><span style="color:#24292E;">          {</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&quot;shanghai&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            value: </span><span style="color:#032F62;">&quot;shanghai&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">          },</span></span>
<span class="line"><span style="color:#24292E;">          {</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&quot;beijing&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            value: </span><span style="color:#032F62;">&quot;beijing&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">          },</span></span>
<span class="line"><span style="color:#24292E;">          {</span></span>
<span class="line"><span style="color:#24292E;">            label: </span><span style="color:#032F62;">&quot;guangzhou&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">            value: </span><span style="color:#032F62;">&quot;guangzhou&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">          },</span></span>
<span class="line"><span style="color:#24292E;">        ];</span></span>
<span class="line"><span style="color:#24292E;">        requestRemoteCount.value</span><span style="color:#D73A49;">++</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">        </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Promise</span><span style="color:#24292E;">((</span><span style="color:#E36209;">r</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setTimeout</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">r</span><span style="color:#24292E;">(data), </span><span style="color:#005CC5;">2000</span><span style="color:#24292E;">));</span></span>
<span class="line"><span style="color:#24292E;">      },</span></span>
<span class="line"><span style="color:#24292E;">    },</span></span>
<span class="line"><span style="color:#24292E;">    el: { filterable: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, multiple: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, multipleLimit: </span><span style="color:#005CC5;">2</span><span style="color:#24292E;"> },</span></span>
<span class="line"><span style="color:#24292E;">    rules: [{ required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&quot;miss area&quot;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&quot;change&quot;</span><span style="color:#24292E;"> }],</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    type: </span><span style="color:#032F62;">&quot;date-picker&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    id: </span><span style="color:#032F62;">&quot;date&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    label: </span><span style="color:#032F62;">&quot;date&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    el: {</span></span>
<span class="line"><span style="color:#24292E;">      type: </span><span style="color:#032F62;">&quot;daterange&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">      valueFormat: </span><span style="color:#032F62;">&quot;yyyy-MM-dd&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    },</span></span>
<span class="line"><span style="color:#24292E;">    rules: [{ required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&quot;miss date&quot;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&quot;change&quot;</span><span style="color:#24292E;"> }],</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">inputFormat</span><span style="color:#24292E;">: (</span><span style="color:#E36209;">row</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (row.startDate </span><span style="color:#D73A49;">&amp;&amp;</span><span style="color:#24292E;"> row.endDate) {</span></span>
<span class="line"><span style="color:#24292E;">        </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> [row.startDate, row.endDate];</span></span>
<span class="line"><span style="color:#24292E;">      }</span></span>
<span class="line"><span style="color:#24292E;">    },</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">outputFormat</span><span style="color:#24292E;">: (</span><span style="color:#E36209;">val</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">!</span><span style="color:#24292E;">val) {</span></span>
<span class="line"><span style="color:#24292E;">        </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> { startDate: </span><span style="color:#032F62;">&quot;&quot;</span><span style="color:#24292E;">, endDate: </span><span style="color:#032F62;">&quot;&quot;</span><span style="color:#24292E;"> };</span></span>
<span class="line"><span style="color:#24292E;">      }</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">        startDate: val[</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">],</span></span>
<span class="line"><span style="color:#24292E;">        endDate: val[</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">],</span></span>
<span class="line"><span style="color:#24292E;">      };</span></span>
<span class="line"><span style="color:#24292E;">    },</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    type: </span><span style="color:#032F62;">&quot;switch&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    id: </span><span style="color:#032F62;">&quot;delivery&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    label: </span><span style="color:#032F62;">&quot;delivery&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    type: </span><span style="color:#032F62;">&quot;checkbox-group&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    id: </span><span style="color:#032F62;">&quot;type&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    label: </span><span style="color:#032F62;">&quot;type&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    default: [],</span></span>
<span class="line"><span style="color:#24292E;">    options: [</span></span>
<span class="line"><span style="color:#24292E;">      {</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&quot;typeA&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">      },</span></span>
<span class="line"><span style="color:#24292E;">      {</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&quot;typeB&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">      },</span></span>
<span class="line"><span style="color:#24292E;">      {</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&quot;typeC&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">      },</span></span>
<span class="line"><span style="color:#24292E;">    ],</span></span>
<span class="line"><span style="color:#24292E;">    rules: [{ type: </span><span style="color:#032F62;">&quot;array&quot;</span><span style="color:#24292E;">, required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&quot;miss type&quot;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&quot;change&quot;</span><span style="color:#24292E;"> }],</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    type: </span><span style="color:#032F62;">&quot;radio-group&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    id: </span><span style="color:#032F62;">&quot;resource&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    label: </span><span style="color:#032F62;">&quot;resource&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    options: [</span></span>
<span class="line"><span style="color:#24292E;">      {</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&quot;resourceA&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">      },</span></span>
<span class="line"><span style="color:#24292E;">      {</span></span>
<span class="line"><span style="color:#24292E;">        label: </span><span style="color:#032F62;">&quot;resourceB&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">      },</span></span>
<span class="line"><span style="color:#24292E;">    ],</span></span>
<span class="line"><span style="color:#24292E;">    rules: [{ required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&quot;miss resource&quot;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&quot;change&quot;</span><span style="color:#24292E;"> }],</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">  {</span></span>
<span class="line"><span style="color:#24292E;">    type: </span><span style="color:#032F62;">&quot;input&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    id: </span><span style="color:#032F62;">&quot;desc&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    label: </span><span style="color:#032F62;">&quot;desc&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    el: {</span></span>
<span class="line"><span style="color:#24292E;">      type: </span><span style="color:#032F62;">&quot;textarea&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    },</span></span>
<span class="line"><span style="color:#24292E;">    rules: [{ required: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">, message: </span><span style="color:#032F62;">&quot;miss desc&quot;</span><span style="color:#24292E;">, trigger: </span><span style="color:#032F62;">&quot;blur&quot;</span><span style="color:#24292E;"> }],</span></span>
<span class="line"><span style="color:#24292E;">  },</span></span>
<span class="line"><span style="color:#24292E;">]);</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">resetForm</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  form.value.methods.</span><span style="color:#6F42C1;">resetFields</span><span style="color:#24292E;">();</span></span>
<span class="line"><span style="color:#24292E;">};</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disableName</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  content[</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">].disabled </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">!</span><span style="color:#24292E;">content[</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">].disabled;</span></span>
<span class="line"><span style="color:#24292E;">};</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setOptions</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">region</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> content.</span><span style="color:#6F42C1;">find</span><span style="color:#24292E;">((</span><span style="color:#E36209;">item</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> item.id </span><span style="color:#D73A49;">===</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&quot;region&quot;</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (</span><span style="color:#D73A49;">!</span><span style="color:#24292E;">region) </span><span style="color:#D73A49;">return</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">  region.options </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [{ label: </span><span style="color:#032F62;">&quot;广州&quot;</span><span style="color:#24292E;">, value: </span><span style="color:#032F62;">&quot;广州&quot;</span><span style="color:#24292E;"> }];</span></span>
<span class="line"><span style="color:#24292E;">};</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">addFormItem</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">i</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> Math.</span><span style="color:#6F42C1;">floor</span><span style="color:#24292E;">(Math.</span><span style="color:#6F42C1;">random</span><span style="color:#24292E;">() </span><span style="color:#D73A49;">*</span><span style="color:#24292E;"> (content.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">+</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">));</span></span>
<span class="line"><span style="color:#24292E;">  id.value</span><span style="color:#D73A49;">++</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">  content.</span><span style="color:#6F42C1;">splice</span><span style="color:#24292E;">(i, </span><span style="color:#005CC5;">0</span><span style="color:#24292E;">, {</span></span>
<span class="line"><span style="color:#24292E;">    id: </span><span style="color:#032F62;">`name${</span><span style="color:#24292E;">id</span><span style="color:#032F62;">.</span><span style="color:#24292E;">value</span><span style="color:#032F62;">}`</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    label: </span><span style="color:#032F62;">`表单项${</span><span style="color:#24292E;">id</span><span style="color:#032F62;">.</span><span style="color:#24292E;">value</span><span style="color:#032F62;">}`</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">    type: </span><span style="color:#032F62;">&quot;input&quot;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">  });</span></span>
<span class="line"><span style="color:#24292E;">};</span></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">removeFormItem</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (content.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">&lt;=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span><span style="color:#24292E;">;</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">i</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> Math.</span><span style="color:#6F42C1;">floor</span><span style="color:#24292E;">(Math.</span><span style="color:#6F42C1;">random</span><span style="color:#24292E;">() </span><span style="color:#D73A49;">*</span><span style="color:#24292E;"> content.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;">  content.</span><span style="color:#6F42C1;">splice</span><span style="color:#24292E;">(i, </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;">};</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details></div></div></main><footer class="VPDocFooter" data-v-1a937d4e data-v-560b6242><!--[--><!--]--><!----><nav class="prev-next" data-v-560b6242><div class="pager" data-v-560b6242><a class="pager-link prev" href="/assembly/form/checkbox-group.html" data-v-560b6242><span class="desc" data-v-560b6242>Previous page</span><span class="title" data-v-560b6242>checkbox-group</span></a></div><div class="pager" data-v-560b6242><a class="pager-link next" href="/assembly/form/date-picker.html" data-v-560b6242><span class="desc" data-v-560b6242>Next page</span><span class="title" data-v-560b6242>date-picker</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"assembly_form_date-picker.md\":\"5c6114ad\",\"assembly_form_on.md\":\"2cf14d5a\",\"assembly_advanced_customform.md\":\"79eb31c6\",\"assembly_form_slot.md\":\"2081c847\",\"assembly_form_rules-plus.md\":\"9d3d6311\",\"assembly_form_deprecated.md\":\"66b6dbb8\",\"assembly_form_get-component-by-id.md\":\"8171a973\",\"assembly_form_radio-group.md\":\"52598721\",\"assembly_form_checkbox-group.md\":\"7b880d40\",\"assembly_form_set-options.md\":\"6b9cb6b1\",\"assembly_advanced_customformroules.md\":\"137f423d\",\"index.md\":\"f5c0a7b4\",\"assembly_form_disabled.md\":\"c70d39d1\",\"assembly_form_remote.md\":\"3173ea21\",\"assembly_form_content.md\":\"7e49928d\",\"assembly_form_rules.md\":\"2773a393\",\"assembly_form_el.md\":\"e7c42ee4\",\"assembly_form_slot-label.md\":\"5187c376\",\"guide_table.md\":\"4a405abc\",\"assembly_form_hidden.md\":\"00926d42\",\"assembly_form_get-form-value.md\":\"20d141c0\",\"assembly_form_update-form.md\":\"7ab65351\",\"assembly_form_v-model.md\":\"f8b8f80f\",\"assembly_form_basic.md\":\"04efb572\",\"assembly_form_readonly.md\":\"e6d69789\",\"assembly_form_next-tick.md\":\"4643f5b6\",\"assembly_form_value-format.md\":\"6904d86f\",\"assembly_advanced_upload.md\":\"26cfdf6f\",\"assembly_table_table.md\":\"88379d01\",\"guide_form.md\":\"c20cffa1\",\"assembly_advanced_uploadfile.md\":\"03238925\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"base\":\"/jiayc4215/\",\"siteTitle\":false,\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/form\"},{\"text\":\"组件\",\"link\":\"/assembly/form/basic\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/childe-jia\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"快速开始\",\"items\":[{\"text\":\"表单Form\",\"link\":\"/guide/form\"},{\"text\":\"表格table\",\"link\":\"/guide/table\"}]}],\"/assembly/\":[{\"text\":\"表单Form\",\"items\":[{\"text\":\"base\",\"link\":\"/assembly/form/basic\"},{\"text\":\"checkbox-group\",\"link\":\"/assembly/form/checkbox-group\"},{\"text\":\"content\",\"link\":\"/assembly/form/content\"},{\"text\":\"date-picker\",\"link\":\"/assembly/form/date-picker\"},{\"text\":\"deprecated\",\"link\":\"/assembly/form/deprecated\"},{\"text\":\"disabled\",\"link\":\"/assembly/form/disabled\"},{\"text\":\"el\",\"link\":\"/assembly/form/el\"},{\"text\":\"get-component-by-id\",\"link\":\"/assembly/form/get-component-by-id\"},{\"text\":\"get-form-value\",\"link\":\"/assembly/form/get-form-value\"},{\"text\":\"hidden\",\"link\":\"/assembly/form/hidden\"},{\"text\":\"next-tick\",\"link\":\"/assembly/form/next-tick\"},{\"text\":\"on\",\"link\":\"/assembly/form/on\"},{\"text\":\"radio-group\",\"link\":\"/assembly/form/radio-group\"},{\"text\":\"readonly\",\"link\":\"/assembly/form/readonly\"},{\"text\":\"remote\",\"link\":\"/assembly/form/remote\"},{\"text\":\"rules-plus\",\"link\":\"/assembly/form/rules-plus\"},{\"text\":\"rules\",\"link\":\"/assembly/form/rules\"},{\"text\":\"set-options\",\"link\":\"/assembly/form/set-options\"},{\"text\":\"slot-label\",\"link\":\"/assembly/form/slot-label\"},{\"text\":\"slot\",\"link\":\"/assembly/form/slot\"},{\"text\":\"update-form\",\"link\":\"/assembly/form/update-form\"},{\"text\":\"v-model\",\"link\":\"/assembly/form/v-model\"},{\"text\":\"value-format\",\"link\":\"/assembly/form/value-format\"}]},{\"text\":\"表格table\",\"items\":[{\"text\":\"表格\",\"link\":\"/assembly/table/table\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"form自定义组件\",\"link\":\"/assembly/advanced/customForm\"},{\"text\":\"form自定义组件设置自定义校验规则\",\"link\":\"/assembly/advanced/customFormRoules\"},{\"text\":\"form自定义组件--图片上传\",\"link\":\"/assembly/advanced/upload\"},{\"text\":\"form自定义组件--文件上传\",\"link\":\"/assembly/advanced/uploadFile\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>